import React, { PureComponent } from "react";
import { PageHeader, Button, Form, Input, Select, Upload, Modal } from "antd";
import { FileImageOutlined, LockOutlined } from "@ant-design/icons";
import "./index.scss"

const { Option } = Select;

//表单布局
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

const routes = [
  {
    path: "index",
    breadcrumbName: "设置",
  },
  {
    path: "first",
    breadcrumbName: "个人信息",
  },
];

export default class Personal extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {};
  }

  formRef = React.createRef();
  onGenderChange = (value) => {
    switch (value) {
      case "male":
        this.formRef.current.setFieldsValue({
          note: "Hi, man!",
        });
        return;

      case "female":
        this.formRef.current.setFieldsValue({
          note: "Hi, lady!",
        });
        return;

      case "other":
        this.formRef.current.setFieldsValue({
          note: "Hi there!",
        });
    }
  };
  onFinish = (values) => {
    console.log(values);
  };
  onReset = () => {
    this.formRef.current.resetFields();
  };
  onFill = () => {
    this.formRef.current.setFieldsValue({
      note: "Hello world!",
      gender: "male",
    });
  };

  //校正密码

  render() {
    const { previewVisible, previewImage, fileList } = this.state;
    const uploadButton = (
      <div>
        <FileImageOutlined />
        <div className="ant-upload-text">点击上传</div>
      </div>
    );

    return (
      <>
        <div className="Header">
          <PageHeader
            className="site-page-header"
            title="个人信息"
            breadcrumb={{
              routes,
            }}
          />
        </div>

        <div className="Content ">
          <div className="flex2">
            <div className="Content-left">
              <h3 className="Advertising-Banner-List">个人信息</h3>
            </div>
          </div>

          <Form
            {...layout}
            ref={this.formRef}
            name="control-ref"
            onFinish={this.onFinish}
          >
            <Form.Item
              label="姓名"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input placeholder="请输入" />
            </Form.Item>

            <Form.Item
              label="微信"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input placeholder="请输入" />
            </Form.Item>
            <Form.Item
              label="电话"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input placeholder="请输入" />
            </Form.Item>
            <Form.Item
              label="QQ"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input placeholder="请输入" />
            </Form.Item>
            <Form.Item
              label="邮箱"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input placeholder="请输入" />
            </Form.Item>

            <div className="Content ">
          <div className="flex2">
            <div className="Content-left">
              <h3 className="Advertising-Banner-List">账户信息</h3>
            </div>
          </div>
          <div className="flex5">
            <div>
              <Form.Item
                label="账号:"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <Input className="Input" placeholder="请输入" />
              </Form.Item>
              <div className="div2">
                <Form.Item
                  label="登录密码"
                  name="password"
                  rules={[
                    {
                      required: true,
                      message: "密码不能为空!",
                    },
                  ]}
                >
                  <Input
                    prefix={<LockOutlined className="site-form-item-icon" />}
                    type="password"
                    placeholder="请输入密码"
                  />
                </Form.Item>
                <Form.Item {...tailLayout}>
                  <Button type="primary" htmlType="submit" className="suiltBtn">
                    提交
                  </Button>
                </Form.Item>
              </div>
            </div>
          </div>
        </div>
          </Form>
        </div>
       
      </>
    );
  }
}
